<template>
  <div class="application-detail-page-wrapper">
    <div v-if="application">
      <el-descriptions :title="application.name">
        <template #extra>
          <el-button type="primary">框架代码</el-button>
        </template>
        <el-descriptions-item :label="application.description"></el-descriptions-item>
      </el-descriptions>
      <el-form inline>
        <el-form-item label="应用类型">
          <el-radio-group v-model="application.type" size="small">
            <el-radio-button label="client">前端</el-radio-button>
            <el-radio-button label="server">后端</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否集成到盖亚">
          <el-switch v-model="application.isGaiYa" />
        </el-form-item>
      </el-form>
    </div>
    <div :style="{ marginTop: '10px' }">
      <el-tabs v-model="editableTabsValue" type="card">
        <el-tab-pane v-for="item in editableTabs" :key="item.key" :label="item.title" :name="item.key">
          <div v-if="item.key == 'integration'">
            <el-tabs v-model="editableTabsValue" tab-position="left" type="card">
              <el-tab-pane v-for="service in services" :key="service.key" :label="service.title" :name="service.key">
                <div>{{ service.content }}</div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div v-else>{{ item.content }}</div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useApplicationService } from '@/service/application-service';
import { Application } from '@/store/application-repository';

const route = useRoute();
const applicationService = useApplicationService();

// 应用
const application = ref<Application>();
const loadApplication = (applicationId: string) => {
  applicationService.getApplication(applicationId).then(data => {
    application.value = data;
    const tags = editableTabs.value.map(tab => {
      return tab.key;
    });
    if (!tags.includes(editableTabsValue.value) && tags.length > 0) {
      editableTabsValue.value = tags[0];
    }
  });
};
watch(
  () => {
    return route.params.applicationId;
  },
  newId => {
    if (newId) {
      loadApplication(newId as string);
    }
  },
  { immediate: true },
);

const services = [
  {
    title: '登录',
    key: 'api',
    content: 'API 管理',
  },
  {
    title: '系统',
    key: 'integration',
    content: '能力集成',
  },
  {
    title: '多语言',
    key: 'dataSource',
    content: '配置数据源',
  },
];

const editableTabsValue = ref('api');
const editableTabs = computed(() => {
  const applicationType = application.value?.type;
  if (applicationType == 'server') {
    return [
      {
        title: 'API 管理',
        key: 'api',
        content: 'API 管理',
      },
      {
        title: '能力集成',
        key: 'integration',
        content: '能力集成',
      },
      {
        title: '数据源',
        key: 'dataSource',
        content: '配置数据源',
      },
    ];
  }
  return [
    {
      title: '页面设计',
      key: 'page',
      content: '页面设计',
    },
  ];
});
</script>
